<template>
    <div>
        <x-header class="top" :left-options="{showBack: false}">  <span class="hide" @click="hide">返回</span>助教</x-header>     
        <!-- <div class="search" >
            <x-input class="search_box"  placeholder="搜索">
                <img slot="label" src="../asset/images/magnifier.png" >
            </x-input>
        </div> -->
        <div class="search" >
            <input class="search_box"  placeholder="搜索" v-model="search_msg"/>
            <input class="search_btn" type="submit" value="搜索" @click="search">
        </div>
        <div id="show_all_teacheres">
            <ul>
                <li  v-for="(item,key2) in teacheres" class="all_teacheres" @click="goback(key2)">
                    <img style="width:41px;height:41px;border-radius:20.5px;" :src="item.pic" alt="">
                    <span class="t_name">{{item.teachername}}</span>
                    <span class="t_dept">{{item.dept}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { XHeader,Flexbox,XInput, FlexboxItem,XButton} from 'vux'
import { mapActions } from 'vuex';
export default {
    data() {
        return {
            search_msg:'',
            type:'allusers',
        }
    },
    created(){
        this.init()
    },
    computed:{
        teacheres(){
            return this.$store.state.user.allusersinfo
        }
    },
    components:{
        XHeader,
        Flexbox, 
        FlexboxItem,
        XInput
    },
    methods:{
        ...mapActions({
             searchClassUsers:'searchClassUsers'
        }),
        init(){
            this.searchClassUsers({vue: this,type: this.type,search:'' }).then(rs => {              
                    console.log("searchClassUsers",this.type)
                }).catch(error => {                    
                    console.log(error)
                })
        },
         goback(key){
            this.$emit('aEvent',{a_length:key})
        },
        hide(){
            this.$parent.showAssistant = false;
            this.$parent.showEdit = true;
        },
        search(){
            this.searchClassUsers({vue:this,type:this.type,search:this.search_msg}).then(rs=>{
                console.log("searchClassUsers",this.type)
            }).catch(error => {
                console.log(error)
            })
        }
    }
}
</script>

<style scoped>
input::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #BDBDBD ;
    font-size: 12px;
    } 

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 

    input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 

    input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 
   .search{
       height:50px;
       margin:0;
       padding-top:7.5px;
   }
   .search_box{
       width:80%;
       height:32.5px;
       margin:0 0 10px 15px;
       padding:0;
       box-shadow:0 0  20px #EEEEEE;
       border-radius:5px;
       border: 0;
       background: url(../asset/images/magnifier.png) 10px 9px no-repeat;
       background-size: 14px 14px;
       padding-left:30px;
       outline: none;
   }
   .search_btn{
        width: 10%;
        height: 26.5px;
        background: 0;
        border: 0;
        color: #F25257;
        margin: 0px 10px 0px 0px;
        float: right;
        outline: none;
        margin-top: 5px;
        font-size: 14px;
        font-family: PingFangSC-Regular;;
   }
   .top{
        margin:0;
        position: relative;
    }
   .hide{
        position: absolute;
        top: 3px;
        left: 10%;
        font-size: 14px;
   }
   .all_teacheres {
       position: relative;
       height:66px;
       margin-left: 17.5px;
   }
    .all_teacheres  img{
       position: absolute;
       top:10px;
   }
    .t_name{
        position: absolute;
        left:20%;
        top:23px;
        font-size:14px; 
        font-family: PingFangSC-Regular;
        color: #363636;
   }
   .t_dept{
        position: absolute;
        left:45%;
        top:23px;
        color:#A5A5A5 ;
        font-size:12px; 
        font-family: PingFangSC-Regular
   }
</style>
